<template>
  <div>
    <el-dialog
      :append-to-body="isInner"
      :title="title"
      :visible.sync="dialogVisible"
      :width="`${width?width:'30%'}`"
      :close-on-click-modal="closeOnClickModal"
      :before-close="()=>$emit('handleClose')"
    >
      <slot></slot>
      <span slot="footer" class="dialog-footer" v-if="showFooter">
        <div v-if="customizeFooter">
          <el-button
            v-for="(item,index) in footerList"
            :key="index"
            :type="item.btnType"
            @click="()=>$emit(item.event)"
          >{{item.btnText}}</el-button>
        </div>
        <div v-else>
          <el-button @click="()=>$emit('handleClose')">取 消</el-button>
          <el-button
             type="primary"
            :loading="loading"
            :disabled="beforeSubmit"
            class="confirmBtn"
            @click="()=>$emit('handleConfirm')"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script >
export default {
  props: {
    width: {
      type: String,
      default: () => "",
    },
    isInner: {
      type: Boolean,
      default: () => false,
    },
    dialogVisible: {
      type: Boolean,
      default: () => false,
    },
    showFooter: {
      type: Boolean,
      default: () => true,
    },
    closeOnClickModal: {
      type: Boolean,
      default: () => false,
    },
    content: {
      default: () => "",
    },
    title: {
      type: String,
      default: () => "提示",
    },
    customizeFooter: {
      type: Boolean,
      default: () => false,
    },
    footerList: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    beforeSubmit: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
</style>
